<template>
	<div class="childcare-container">
		<div class="dataScreen" ref="dataScreenRef">
			<ScreenHeader :titleImg="postTitleImg"></ScreenHeader>
			<div class="property-main">
				<!-- 左边 -->
				<div class="dataScreen-lf">
					<div class="lf-top">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['营收统计']">
						</ItemTitle>
						<div class="lf-top-cn">
							<profitChart ref="profitChartRef"></profitChart>
						</div>
					</div>
					<div class="lf-bottom">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['各园收支情况']">
						</ItemTitle>
						<div class="lf-bottom-cn">
							<scroll-board
								:config="configData"
								:style="{ width: '100%', height: tableHeight + 'px' }"
							/>
							<!-- <el-table
								:data="tableData"
								style="width: 100%"
								:max-height="tableHeight"
								header-row-class-name="table-head"
								row-class-name="table-row"
								class="table-box"
								ref="tableRef"
							>
								<el-table-column width="100">
									<template #default="scope">
										<div class="coloumn-one">
											<img src="@/assets/screenImg/careImg/rect.gif" alt="" />
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="childcare_name" label="名称" />
								<el-table-column
									prop="payment_receipt_income"
									label="缴费单收入"
								>
									<template #default="scope">
										<span>
											{{
												changeNumToWan(scope.row.payment_receipt_income || 0)
											}}
											万元
										</span>
									</template>
								</el-table-column>
								<el-table-column
									prop="write-off_income(month)"
									label="当月核销收入"
								>
									<template #default="scope">
										<span class="grade">
											{{
												changeNumToWan(
													scope.row["write-off_income(month)"] || 0
												)
											}}
											万元
										</span>
									</template>
								</el-table-column>
							</el-table> -->
						</div>
					</div>
				</div>
				<!-- 中间 -->
				<div class="dataScreen-ct">
					<div class="ct-top">
						<timeRange @timeSelect="timeChange" />
						<div class="ct-top-cn">
							<div v-for="item in centetData" class="item-box">
								<div class="lf-icon">
									<img
										src="@/assets/screenImg/careImg/center/centerLeft.png"
										alt=""
									/>
								</div>
								<div class="rg-desc">
									<div class="img">
										<img :src="item.title" alt="" />
										<div v-show="item.sign" class="m-l5">
											<img :src="getSign(item.sign)" alt="" />
											<span
												:style="{
													color: item.sign === 'up' ? '#10FF0E' : '#F50000',
												}"
											>
												{{ item.rate }}%
											</span>
										</div>
									</div>
									<div class="text">
										<span class="numColor">{{ item.value }}</span>
										<span class="numColor unit">{{ item.unit }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="ct-bottom">
						<div class="ct-bottom-cn">
							<mapBox :map-data="mapData" :showInfo="false"></mapBox>
						</div>
					</div>
				</div>
				<!-- 右边 -->
				<div class="dataScreen-rg">
					<div class="dataScreen-top">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['各园托育情况']">
						</ItemTitle>
						<div class="rg-top-cn">
							<div class="cn-top">
								<div v-for="item in rightData" class="item-box">
									<div class="lf-icon">
										<img
											src="@/assets/screenImg/careImg/right/rightBg.png"
											alt=""
										/>
									</div>
									<div class="rg-desc">
										<div class="childcare_name">
											{{ item.childcare_name }}
										</div>
										<div class="text">
											<span class="numColor2">{{ item.child_num }}</span>
											<span class="m-l5">
												<img
													src="@/assets/screenImg/careImg/right/unit.png"
													alt=""
												/>
											</span>
										</div>
									</div>
								</div>
							</div>
							<div class="cn-bottom">
								<stateChart ref="stateChartRef"></stateChart>
							</div>
						</div>
					</div>
					<div class="dataScreen-bottom">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['在园幼儿时长']">
						</ItemTitle>
						<div class="rg-bottom-cn">
							<timeChart ref="timeChartRef"></timeChart>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue";
import ScreenHeader from "../components/ScreenHeader";
import { getScale, calcHeight } from "../utils/handelScreen";
import ItemTitle from "../finance/components/ItemTitle";
import { ElTable } from "element-plus";
import { ScrollBoard } from "@kjgl77/datav-vue3";
import timeChart from "./components/timeChart.vue";
import stateChart from "./components/stateChart.vue";
import profitChart from "./components/profitChart.vue";
import mapBox from "../property/components/map.vue";
import { changeNumToWan } from "../utils/handelScreen";
import {
	revenueStatisticsYear,
	childcareDistribution,
	childcareIncomeExpenditure,
	chidcareSituation,
	peopleCounting,
	durationChildcare,
} from "./service.js";
import timeRange from "../components/timeRange.vue";

const currentYear = new Date().getFullYear();

const postTitleImg = require("@/assets/screenImg/careImg/headTitle.png");
const postItemTitleImgObj = reactive({
	营收统计: require("@/assets/screenImg/careImg/title1.png"),
	各园收支情况: require("@/assets/screenImg/careImg/title2.png"),
	各园托育情况: require("@/assets/screenImg/careImg/title3.png"),
	在园幼儿时长: require("@/assets/screenImg/careImg/title4.png"),
});

// 左边
let tableHeight = ref();
let tableData = ref([]);
let configData = ref({
	header: [
		`<span></span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>名称</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>缴费单收入</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #56CAFF;'>当月核销收入</span>`,
	],
	headerBGC: "rgba(21, 77, 160, 0.2)",
	data: [],
	oddRowBGC: "transparent",
	evenRowBGC: "transparent",
	align: new Array(4).fill("center"),
	columnWidth: [80],
	rowNum: 5,
});
const fetchLeftTopChartsDatasource = () => {
	revenueStatisticsYear({ year: currentYear }).then((resp) => {
		screenChartObj.chart1 = profitChartRef.value?.initProfitChart(resp);
	});
};

const fetchLeftBottomTableData = () => {
	childcareIncomeExpenditure()
		.then((resp) => {
			tableData.value.splice(0);
			tableData.value.push(...(resp || []));
			configData.value.data = resp.map((item) => {
				// console.log(item);
				return [
					`<div style="display:flex;justify-content:center;align-items:center;width:100%;height:100%;"><img src="${require("@/assets/screenImg/careImg/rect.gif")}" alt="" style="width: 30px;height: 30px;"/></div>`,
					`<span style='font-size: 14px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;'>${item.childcare_name}</span>`,
					`<span style='font-size: 14px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;'>
            ${changeNumToWan(item.payment_receipt_income || 0)}万元</span>`,
					`<span style='font-size: 14px;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;color: #D3E3FF;text-shadow: 0px 2px 4px rgba(54,227,227,0.53);'>
            ${changeNumToWan(item["write-off_income(month)"])}万元</span>`,
				];
			});
		})
		.catch((e) => {});
};

// 中间
let centetData = ref([
	{
		title: require("@/assets/screenImg/careImg/center/title1.png"),
		value: 0,
		sign: "up",
		rate: 0,
		unit: "人",
	},
	{
		title: require("@/assets/screenImg/careImg/center/title2.png"),
		value: 0,
		sign: "up",
		rate: 0,
		unit: "人",
	},
	{
		title: require("@/assets/screenImg/careImg/center/title3.png"),
		value: 0,
		unit: "%",
	},
	{
		title: require("@/assets/screenImg/careImg/center/title4.png"),
		value: 0,
		unit: "人",
	},
	{
		title: require("@/assets/screenImg/careImg/center/title5.png"),
		value: 0,
		unit: "人",
	},
	{
		title: require("@/assets/screenImg/careImg/center/title6.png"),
		value: 0,
		unit: "人",
	},
]);

const fetchMiddleTopStatistics = () => {
	peopleCounting()
		.then((res = {}) => {
			const {
				children_number,
				children_number_rate = 0,
				free_seat_number = 0,
				free_seat_number_rate = 0,
				enrollment_rate = 0,
				temporary_num = 0,
				allday_num = 0,
				halfday_num = 0,
			} = res;
			centetData.value[0].value = children_number;
			centetData.value[0].rate = Math.round(100 * children_number_rate);
			centetData.value[0].sign = +children_number_rate < 0 ? "down" : "up";
			centetData.value[1].value = free_seat_number;
			centetData.value[1].rate = Math.round(100 * free_seat_number_rate);
			centetData.value[1].sign = +free_seat_number_rate < 0 ? "down" : "up";
			centetData.value[2].value = Math.round(100 * enrollment_rate);
			centetData.value[3].value = temporary_num;
			centetData.value[4].value = allday_num;
			centetData.value[5].value = halfday_num;
		})
		.catch((e) => {});
};

let getSign = function (i) {
	let img = ref({
		upImg: require("@/assets/screenImg/commonImg/up.png"),
		downImg: require("@/assets/screenImg/commonImg/down.png"),
	});
	if (i === "up") {
		return img.value.upImg;
	} else if (i === "down") {
		return img.value.downImg;
	}
};
let iconArr = ref([
	{
		src: require("@/assets/screenImg/propertyImg/center/icon1.png"), //pink
		x: "50%",
		y: "70%",
	},
	{
		src: require("@/assets/screenImg/propertyImg/center/icon2.png"), //green
		x: "60%",
		y: "38%",
	},
	{
		src: require("@/assets/screenImg/propertyImg/center/icon3.png"), //darkblue
		x: "27%",
		y: "40%",
	},
	{
		src: require("@/assets/screenImg/propertyImg/center/icon4.png"), //blue
		x: "68%",
		y: "11%",
	},
	{
		src: require("@/assets/screenImg/propertyImg/center/icon5.png"), //red
		x: "42%",
		y: "46%",
	},
]);

let timeChange = (time) => {
	console.log(time);
};

// 地图数据
let mapData = ref([]);

//右侧
let rightData = ref([]);

const profitChartRef = ref();
const stateChartRef = ref();
const timeChartRef = ref();
const screenChartObj = reactive({
	chart1: null,
	chart2: null,
	chart3: null,
});

const fetchRightTop = () => {
	chidcareSituation()
		.then((resp = []) => {
			rightData.value.splice(0);
			rightData.value.push(...resp);
			screenChartObj.chart3 = stateChartRef.value?.initStateChart(resp);
		})
		.catch((e) => {});
};

const fetchRightBottom = () => {
	durationChildcare()
		.then((resp) => {
			screenChartObj.chart2 = timeChartRef.value?.initTimeChart(resp);
		})
		.catch((e) => {});
};

const fetchMapData = () => {
	childcareDistribution()
		.then((resp = []) => {
			// console.log("map--", resp)
			const formatted = resp.map((item) => {
				const {} = item;
				return {
					src: require("@/assets/screenImg/propertyImg/center/icon1.png"),
					lng: item["long"],
					lat: item["lat"],
				};
			});
			mapData.value.splice(0);
			mapData.value.push(...formatted);
		})
		.catch((e) => {});
};

const initAllCharts = () => {
	fetchLeftTopChartsDatasource();
	fetchLeftBottomTableData();
	fetchMiddleTopStatistics();
	fetchRightTop();
	fetchRightBottom();
	fetchMapData();
};

const dataScreenRef = ref(null);
const screenResize = () => {
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
	}
};

let tableRef = ref(null);
onMounted(() => {
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
		dataScreenRef.value.style.width = `1920px`;
		dataScreenRef.value.style.height = `1080px`;
		window.addEventListener("resize", screenResize);

		nextTick(() => {
			initAllCharts();
			tableHeight.value = calcHeight("lf-bottom-cn");
		});
	}
});
onBeforeUnmount(() => {
	window.removeEventListener("resize", screenResize);
	Object.values(screenChartObj).forEach((val) => val?.dispose());
});
</script>
<style lang="scss" scoped>
@import "./childcareStyle.scss";
</style>
